<template>
  <main class="main">
    <Hero :item="featured" v-if="featured" />

    <ListingCarousel
      v-if="popular && popular.length"
      :title="popularTitle"
      :view-all-url="popularUrl"
      :items="popular"
    />

    <ListingCarousel
      v-if="topRated && topRated.length"
      :title="topRatedTitle"
      :view-all-url="topRatedUrl"
      :items="topRated"
    />

    <ListingCarousel
      v-if="upcoming && upcoming.length"
      :title="upcomingTitle"
      :view-all-url="upcomingUrl"
      :items="upcoming"
    />

    <ListingCarousel
      v-if="nowPlaying && nowPlaying.length"
      :title="nowPlayingTitle"
      :view-all-url="nowPlayingUrl"
      :items="nowPlaying"
    />
  </main>
</template>
<script setup>
import { ref } from "vue";
import { getMovie, getMovies, getListItem } from "@/api";
import Hero from "@/components/Hero.vue";
import ListingCarousel from "@/components/ListingCarousel.vue";

const popular = ref([]);
const topRated = ref([]);
const upcoming = ref([]);
const nowPlaying = ref([]);
const featured = ref(null);

const popularTitle = getListItem("movie", "popular").title;

const popularUrl = { name: "movieCategory", params: { name: "popular" } };

const topRatedTitle = getListItem("movie", "top_rated").title;

const topRatedUrl = {
  name: "movieCategory",
  params: { name: "top_rated" },
};

const upcomingTitle = getListItem("movie", "upcoming").title;

const upcomingUrl = {
  name: "movieCategory",
  params: { name: "upcoming" },
};

const nowPlayingTitle = getListItem("movie", "now_playing").title;

const nowPlayingUrl = {
  name: "movieCategory",
  params: { name: "now_playing" },
};

getMovies("popular").then((res) => {
  popular.value = res.results;
});

getMovies("top_rated").then((res) => {
  topRated.value = res.results;
});

getMovies("upcoming").then((res) => {
  upcoming.value = res.results;
  getMovie(res.results[0].id).then((movie) => {
    featured.value = movie;
  });
});

getMovies("now_playing").then((res) => {
  nowPlaying.value = res.results;
});
</script>
